<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <meta name="description" content="账号设置-个人中心-政府采购信息网">
    <meta name="keywords" content="账号设置">
    <link rel="icon" href="/web/img/favicon.ico">
    <link rel="shortcut icon" href="/web/img/favicon.ico">
    <!--    <link rel="stylesheet" href="//at.alicdn.com/t/font_2052942_xzk2q3ix0w.css">-->
    <title>账号设置-个人中心-政府采购信息网</title>
    <link rel="stylesheet" type="text/css" href="https://www.jq22.com/jquery/bootstrap-3.3.4.css">
    <link href="/web/lib/cropper/cropper.min.css" rel="stylesheet">
    <link href="/web/lib/cropper/sitelogo.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="https://www.jq22.com/jquery/font-awesome.4.6.0.css">
    <style type="text/less">
        @import "/web/public/public.less";

        .container {
            width: 100% !important;
            padding: 80px 0 0 0 !important;

            #main {
                .clearfix;
                width: 1024px;
                margin: 0 auto;
                position: relative;
                padding-top: 23px;

                .aside-wrap {
                    width: 302px;
                    .fl;
                }

                .list-wrap {
                    width: 688px;
                    .fr;

                    .tab-list {
                        height: 50px;
                        background-color: #efefef;

                        .tab-item {
                            width: 136px;
                            line-height: 50px;
                            background-color: #ffffff;
                            border-top: 1px solid #3c76f5;
                            text-align: center;
                        }
                    }

                    .personal-info {
                        .top {
                            line-height: 90px;
                            padding-left: 10px;

                            span {
                                & + span {
                                    margin-left: 65px;
                                }
                                &.logout{
                                    .fr;
                                    cursor: pointer;
                                }
                            }
                        }

                        .header-pic-wrap {
                            text-align: center;

                            .img-wrap {
                                width: 122px;
                                height: 122px;
                                overflow: hidden;
                                border-radius: 50%;
                                margin: 0 auto;
                                position: relative;
                                cursor: pointer;

                                &:hover {
                                    &:before {
                                        display: block;
                                        width: 100%;
                                        height: 100%;
                                        content: '修改头像';
                                        position: absolute;
                                        text-align: center;
                                        line-height: 122px;
                                        background-color: rgba(0, 0, 0, .5);
                                        color: #ffffff;
                                    }
                                }


                                img {
                                    width: 100%;
                                    height: 100%;
                                }
                            }

                            .nick-name {
                                line-height: 66px;

                                input {
                                    display: none;
                                    height: 30px;
                                    border: 1px solid lightgray;
                                    border-radius: 3px;

                                }

                                .btn-modify {
                                    color: #3c76f5;
                                    font-size: 15px;
                                    cursor: pointer;
                                    margin-left: 10px;
                                }

                                .btn-save-nickname {
                                    display: none;
                                    color: #3c76f5;
                                    font-size: 15px;
                                    cursor: pointer;
                                    margin-left: 10px;
                                }
                            }

                            & + h6 {
                                font-weight: normal;
                            }
                        }

                        .other {
                            .item {
                                margin-top: 30px;
                                .clearfix;
                                line-height: 52px;

                                &.password {
                                    a {
                                        color: #3c76f5;
                                    }
                                }

                                .keyword {
                                    width: 128px;
                                    text-align: right;
                                    .fl;
                                }

                                .value {
                                    .fr;
                                    width: 550px;
                                    position: relative;

                                    input {
                                        width: 500px;
                                        height: 52px;
                                        border-radius: 5px;
                                        border: 1px solid #e0e0e0;
                                        font-size: 16px;
                                        padding-left: 20px;

                                        & + .error-sign {
                                            position: absolute;
                                            bottom: -40px;
                                            left: 0;
                                            color: red;
                                            visibility: hidden;
                                        }
                                    }

                                    textarea {
                                        width: 500px;
                                        height: 176px;
                                        border-radius: 5px;
                                        border: 1px solid #e0e0e0;
                                        font-size: 16px;
                                        padding-left: 20px;
                                        padding-top: 8px;
                                        resize: none;
                                        font-family: inherit;

                                        & + .error-sign {
                                            position: absolute;
                                            bottom: -40px;
                                            left: 0;
                                            color: red;
                                            visibility: hidden;
                                        }
                                    }

                                    .radio {
                                        .fl;
                                        margin-top: 0;
                                        margin-bottom: 0;

                                        & + .radio {
                                            margin-left: 30px;
                                        }
                                    }

                                    .radio input[type="radio"] {
                                        position: absolute;
                                        opacity: 0;
                                        display: none;
                                    }

                                    .radio input[type="radio"] + label {
                                        position: relative;
                                    }

                                    .radio input[type="radio"] + .radio-label:before {
                                        content: '';
                                        background: #f4f4f4;
                                        border-radius: 100%;
                                        border: 1px solid #b4b4b4;
                                        display: inline-block;
                                        width: 15px;
                                        height: 15px;
                                        position: relative;
                                        top: -0.2em;
                                        margin-right: 20px;
                                        vertical-align: middle;
                                        cursor: pointer;
                                        text-align: center;
                                        -webkit-transition: all 250ms ease;
                                        transition: all 250ms ease;
                                    }

                                    .radio input[type="radio"]:checked + .radio-label:before {
                                        background-color: #3c76f5;
                                        box-shadow: inset 0 0 0 4px #f4f4f4;
                                        border-color: #3c76f5;
                                    }

                                    .radio input[type="radio"]:focus + .radio-label:before {
                                        outline: none;
                                        border-color: #3c76f5;
                                    }

                                    .radio input[type="radio"]:disabled + .radio-label:before {
                                        box-shadow: inset 0 0 0 4px #f4f4f4;
                                        border-color: #b4b4b4;
                                        background: #b4b4b4;
                                    }

                                    .radio input[type="radio"] + .radio-label:empty:before {
                                        margin-right: 0;
                                    }
                                }
                            }
                        }
                    }

                    .btn.save {
                        display: block;
                        width: 130px;
                        line-height: 50px;
                        color: #ffffff;
                        text-align: center;
                        background-color: #3c76f5;
                        border-radius: 5px;
                        margin: 50px auto 0;
                        cursor: pointer;
                        padding: 0;
                    }
                }
            }
        }
    </style>

    <script src="/web/lib/less.min.js"></script>
    <script src="/web/lib/jquery-1.12.4.min.js"></script>
    <script src="/web/public/public.js"></script>
    <script src="/web/lib/jquery.pagination.js"></script>
    <script src="/web/lib/cropper/cropper.js"></script>
    <script src="/web/lib/cropper/sitelogo.js"></script>
    <script src="/web/js/sso/sso-logout.js"></script>
</head>
<body>
<div class="container">
    <!--这里引入header-->
    <!--#include virtual="/web/html/header/header.htm"-->
    <div id="main">
        <div class="aside-wrap">
            <!--#include virtual="/web/html/fragment/personal/aside.htm"-->
        </div>
        <div class="list-wrap">
            <div class="tab-list">
                <div class="tab-item">
                    账号设置
                </div>
            </div>
            <div class="personal-info">
                <div class="top">
                    <span class="register-time">注册时间：</span>
                    <span class="status">账号状态：</span>
                    <span class="logout">退出登录</span>
                </div>
                <div class="header-pic-wrap">
                    <div class="img-wrap" data-toggle="modal" data-target="#avatar-modal"><img src="/web/img/noface.png"
                                                                                               alt=""></div>
                    <div class="nick-name">
                        <span>昵称：</span>
                        <span class="nick-name-text"></span>
                        <input type="text">
                        <span class="btn-modify">修改</span>
                        <span class="btn-save-nickname">保存</span>
                    </div>
                </div>
                <h6>基本信息</h6>
                <div class="other">
                    <div class="item mobile">
                        <div class="keyword">登录手机：</div>
                        <div class="value"></div>
                    </div>
                    <div class="item password">
                        <div class="keyword">密码：</div>
                        <div class="value"><a href="/web/login.html?changepw=1">【修改】</a></div>
                    </div>
                    <div class="item birth">
                        <div class="keyword">生日：</div>
                        <div class="value">
                            <input type="text" placeholder="请输入出生日期（例：1995-01-01）">
                            <span class="error-sign">请输入格式为yyyy-mm-dd并且有效的日期</span>
                        </div>
                    </div>
                    <div class="item sex">
                        <div class="keyword">性别：</div>
                        <div class="value">
                            <div class="radio">
                                <input id="radio-1" name="radio" type="radio" value="1">
                                <label for="radio-1" class="radio-label">男</label>
                            </div>
                            <div class="radio">
                                <input id="radio-2" name="radio" type="radio" value="2">
                                <label for="radio-2" class="radio-label">女</label>
                            </div>

                        </div>
                    </div>
                    <div class="item unit">
                        <div class="keyword">单位名称：</div>
                        <div class="value">
                            <input type="text" placeholder="请输入单位名称">
                            <span class="error-sign">单位名称不能超过255个字</span>
                        </div>
                    </div>
                    <div class="item depart">
                        <div class="keyword">部门：</div>
                        <div class="value">
                            <input type="text" placeholder="请输入所在部门">
                            <span class="error-sign">所在部门不能超过20个字</span>
                        </div>
                    </div>
                    <div class="item worker">
                        <div class="keyword">职务：</div>
                        <div class="value">
                            <input type="text" placeholder="请输入您的职务">
                            <span class="error-sign">职务不能超过50个字</span>
                        </div>
                    </div>
                    <div class="item signature">
                        <div class="keyword">个人简介：</div>
                        <div class="value">
                            <textarea placeholder="个人简介，其他用户可见" name="" id="" cols="30" rows="10"></textarea>
                            <span class="error-sign">个人简介不能超过255个字</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="btn save">保存</div>
        </div>
    </div>
    <!--#include file="/web/html/footer/footer.htm"-->
    <div class="modal fade" id="avatar-modal" aria-hidden="true" aria-labelledby="avatar-modal-label" role="dialog"
         tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">

                <form class="avatar-form">
                    <div class="modal-header">
                        <button class="close" data-dismiss="modal" type="button">&times;</button>
                        <h4 class="modal-title" id="avatar-modal-label">上传图片</h4>
                    </div>
                    <div class="modal-body">
                        <div class="avatar-body">
                            <div class="avatar-upload">
                                <input class="avatar-src" name="avatar_src" type="hidden">
                                <input class="avatar-data" name="avatar_data" type="hidden">
                                <label for="avatarInput" style="line-height: 35px;">图片上传</label>
                                <button class="btn btn-danger" type="button" style="height: 35px;"
                                        onclick="$('input[id=avatarInput]').click();">请选择图片
                                </button>
                                <span id="avatar-name"></span>
                                <input class="avatar-input hide" id="avatarInput" name="avatar_file" type="file"></div>
                            <div class="row">
                                <div class="col-md-9">
                                    <div class="avatar-wrapper"></div>
                                </div>
                                <div class="col-md-3">
                                    <div class="avatar-preview preview-lg" id="imageHead"></div>

                                </div>
                            </div>
                            <div class="row avatar-btns">
                                <div class="col-md-4">
                                    <div class="btn-group">
                                        <button class="btn btn-danger fa fa-undo" data-method="rotate" data-option="-90"
                                                type="button" title="Rotate -90 degrees"> 向左旋转
                                        </button>
                                    </div>
                                    <div class="btn-group">
                                        <button class="btn  btn-danger fa fa-repeat" data-method="rotate"
                                                data-option="90"
                                                type="button" title="Rotate 90 degrees"> 向右旋转
                                        </button>
                                    </div>
                                </div>
                                <div class="col-md-5" style="text-align: right;">
                                    <button class="btn btn-danger fa fa-arrows" data-method="setDragMode"
                                            data-option="move"
                                            type="button" title="移动">
<span class="docs-tooltip" data-toggle="tooltip" title=""
      data-original-title="$().cropper(&quot;setDragMode&quot;, &quot;move&quot;)">
</span>
                                    </button>
                                    <button type="button" class="btn btn-danger fa fa-search-plus" data-method="zoom"
                                            data-option="0.1" title="放大图片">
<span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="$().cropper(&quot;zoom&quot;, 0.1)">

</span>
                                    </button>
                                    <button type="button" class="btn btn-danger fa fa-search-minus" data-method="zoom"
                                            data-option="-0.1" title="缩小图片">
<span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="$().cropper(&quot;zoom&quot;, -0.1)">

</span>
                                    </button>
                                    <button type="button" class="btn btn-danger fa fa-refresh" data-method="reset"
                                            title="重置图片">
<span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="$().cropper(&quot;reset&quot;)"
      aria-describedby="tooltip866214"></span>
                                    </button>
                                </div>
                                <div class="col-md-3">
                                    <button class="btn btn-danger btn-block avatar-save fa fa-save" type="button">
                                        保存修改
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script src="/web/lib/cropper/html2canvas.min.js"></script>
<script>

    var $birthInput = $('.item.birth input'),
        $nickNameInput = $('.header-pic-wrap .nick-name input'),
        $nickNameText = $('.header-pic-wrap .nick-name .nick-name-text'),
        $unitInput = $('.item.unit input'),
        $departInput = $('.item.depart input'),
        $workerInput = $('.item.worker input'),
        $signatureTextarea = $('.item.signature textarea'),
        $headerImg = $('.header-pic-wrap .img-wrap img');
    $(function () {
        $('#personal-center-aside .aside-list .options').addClass('active');

        $nickNameInput.change(function () {
            $nickNameText.text($(this).val());
        });
        $('.btn-modify').click(function () {
            $nickNameInput.css({display: 'inline-block'});
            $nickNameText.css({display: 'none'});
            $(this).css({display: 'none'});
            $('.btn-save-nickname').css({display: 'inline'});
        });

        $('.btn-save-nickname').click(function () {
            var that = this;
            $.ajax({
                url: ports.updateNickname,
                data: {
                    nickname: $nickNameInput.val()
                },
                success: function (res) {
                    console.log('修改账户昵称', res);
                    if (res.status == 200) {
                        utils.showToast({
                            title: '修改成功',
                            type: 'success'
                        })
                        $nickNameInput.css({display: 'none'});
                        $nickNameText.css({display: 'inline'});
                        $(that).css({display: 'none'});
                        $('.btn-modify').css({display: 'inline'});
                        $('#personal-center-aside .header-img-wrap p').text($nickNameInput.val());
                        var updateUserInfo = userInfo;
                        updateUserInfo.nickname = res.data.data;
                        userInfo = updateUserInfo;
                        localStorage.setItem('userInfo', JSON.stringify(userInfo));
                    }
                }
            })

        });

        function setUserInfo(obj) {
            $('.personal-info .top .register-time').text('注册时间：' + obj.strAddTime.substr(0, 10));
            $('.personal-info .top .status').text('账号状态：' + (obj.userStatus == 0 ? '冻结' : obj.userStatus == 1 ? '正常' : obj.userStatus == 2 ? '禁言' : '账户异常'));
            $headerImg.prop('src', obj.userInfo.userpic);
            $nickNameInput.val(obj.userInfo.nickname);
            $nickNameText.text(obj.userInfo.nickname);
            $('.other .mobile .value').text(utils.formatPhoneNumber(obj.tel));
            $birthInput.val(obj.userInfo.birth);
            $('.item.sex input[value=' + obj.userInfo.sex + ']').prop('checked', true);
            $unitInput.val(obj.userInfo.company);
            $departInput.val(obj.userInfo.depart);
            $workerInput.val(obj.userInfo.worker);
            $signatureTextarea.val(obj.userInfo.userSignature);

            userInfo = obj.userInfo;
            localStorage.setItem('userInfo', JSON.stringify(userInfo));
        }

        var birthPass = true, unitPass = true, departPass = true, workerPass = true, signaturePass = true;

        $birthInput.change(function () {
            var val = $(this).val().trim();
            if (!utils.isDate(val)) {
                $(this).next('span').css({visibility: 'visible'});
                birthPass = false;
            } else {
                $(this).next('span').css({visibility: 'hidden'});
                birthPass = true;
            }
        });
        $unitInput.change(function () {
            var val = $(this).val().trim();
            if (val.length > 255) {
                $(this).next('span').css({visibility: 'visible'});
                unitPass = false;
            } else {
                $(this).next('span').css({visibility: 'hidden'});
                unitPass = true;
            }
        });
        $departInput.change(function () {
            var val = $(this).val().trim();
            if (val.length > 20) {
                $(this).next('span').css({visibility: 'visible'});
                departPass = false;
            } else {
                $(this).next('span').css({visibility: 'hidden'});
                departPass = true;
            }
        });
        $workerInput.change(function () {
            var val = $(this).val().trim();
            if (val.length > 50) {
                $(this).next('span').css({visibility: 'visible'});
                workerPass = false;
            } else {
                $(this).next('span').css({visibility: 'hidden'});
                workerPass = true;
            }
        });
        $signatureTextarea.change(function () {
            var val = $(this).val().trim();
            if (val.length > 255) {
                $(this).next('span').css({visibility: 'visible'});
                signaturePass = false;
            } else {
                $(this).next('span').css({visibility: 'hidden'});
                signaturePass = true;
            }
        });

        $.ajax({
            url: ports.getAccountInfo,
            success: function (res) {
                console.log('获取账户信息', res);

                if (res.status == 200) setUserInfo(res.data);
            }
        })
        $('.btn.save').click(function () {
            var pass = true;
            if (!birthPass) {
                pass = false;
            }
            if (!unitPass) {
                pass = false;
            }
            if (!departPass) {
                pass = false;
            }
            if (!workerPass) {
                pass = false;
            }
            if (!signaturePass) {
                pass = false;
            }
            if (pass) {
                $.ajax({
                    url: ports.updateAccountInfo,
                    data: {
                        "sex": $('.item.sex input[type="radio"]:checked').val(),
                        "birth": $birthInput.val(),
                        "company": $unitInput.val(),
                        "depart": $departInput.val(),
                        "worker": $workerInput.val(),
                        "userSignature": $signatureTextarea.val()
                    },
                    success: function (res) {
                        console.log('修改账户信息', res);
                        if (res.status == 200) {
                            utils.showToast({
                                title: '修改账户信息成功',
                                type: 'success'
                            })
                        }
                    }
                })
            }
        })

        // $('.logout').click(function () {
        //     $.ajax({
        //         url:ports.logout,
        //         success:function (res) {
        //             console.log(res,'请求退出登录')
        //             if(res.status==200){
        //                 localStorage.removeItem('userInfo');
        //                 utils.cookieUtils.delCookie('token');
        //                 window.location.replace("/");
        //             }
        //         }
        //     });
        // });
    })
</script>

<script src="/web/lib/axios.min.js"></script>
<script>
    //做个下简易的验证  大小 格式
    $('#avatarInput').on('change', function (e) {
        var filemaxsize = 1024 * 5;//5M
        var target = $(e.target);
        var Size = target[0].files[0].size / 1024;
        if (Size > filemaxsize) {
            alert('图片过大，请重新选择!');
            $(".avatar-wrapper").childre().remove;
            return false;
        }
        if (!this.files[0].type.match(/image.*/)) {
            alert('请选择正确的图片!')
        } else {
            $('.btn.avatar-save').attr('data-dismiss','modal');
            var filename = document.querySelector("#avatar-name");
            var texts = document.querySelector("#avatarInput").value;
            var teststr = texts;
            testend = teststr.match(/[^\\]+\.[^\(]+/i); //直接完整文件名的
            filename.innerHTML = testend;
        }

    });

    $(".avatar-save").on("click", function () {
        var img_lg = document.getElementById('imageHead');
        // 截图小的显示框内的内容
        html2canvas(img_lg, {
            allowTaint: true,
            taintTest: false,
            onrendered: function (canvas) {
                canvas.id = "mycanvas";
                //生成base64图片数据
                var dataUrl = canvas.toDataURL("image/jpeg");
                $headerImg.prop('src', dataUrl);
                $('#personal-center-aside .header-img-wrap img').prop('src',dataUrl);
                imagesAjax(dataUrl)
            }
        });
    })

    function imagesAjax(src) {
        // console.log(src, utils.base64ToFormData(src).get('file'));
        /*$.ajax({
            url: ports.uploadUserImage,
            data:utils.base64ToFormData(src),
            processData: false,  // jQuery不要去处理发送的数据
            // contentType:'multipart/form-data;boundary=----WebKitFormBoundary2RMjgqDXFG0Ar2Mm',
            enctype:'multipart/form-data',
            success: function (res) {
                console.log('上传用户头像',res)
            }
        });*/
        axios({
            method: 'post',
            url: ports.uploadUserImage,
            data: utils.base64ToFormData(src),
            contentType: 'multipart/form-data;',
            responseType: 'json',
            headers: {
                'Authorization': utils.cookieUtils.getCookie("token")
            }
        }).then(function (res) {
            console.log('上传用户头像', res);
        });
    }
</script>
</body>
</html>
